<template>
<!-- 立即抽奖 -->
	<view>
		<view class="text-center py-1 bg-white mb-1">
			<text class="font-lg text-light-muted f13">
				<!-- 您此次总共成功购买 -->
				{{i18n.lottery_info.t1}}
				<text class="text-warning">{{itemListInfo.all_num}}</text>
				<!-- 次 -->
				{{i18n.common.ci}}
				<!-- 总花费 -->
				{{i18n.lottery_info.t2}}
				<text class="text-warning">{{itemListInfo.all_price}}</text>
				<!-- 积分 -->
				{{i18n.lottery_info.t3}}
				<!-- 信息如下： -->
				{{i18n.lottery_info.t4}}
				
			</text>
		</view>
		<view class="bg-white mb-1 p-1 l-info-box">
		<view v-for="item in itemListInfo.goods_fight_buy_List" :key="item" class="d-flex a-center text-center pb-1 border-bottom">
			<view style="width: 25%;">
				<image mode="widthFix" style="width: 90%" :src="item.good_header"></image>
			</view>
			<view class="d-flex flex-column j-center a-start pr-2" style="width: 75%;">
				<text class="font-md py-1 f13">
					({{item.good_period}} {{i18n.common.expect}}){{item.good_name}}
				</text>
				<view class="d-flex j-sb a-center" style="width: 100%;">
					<view>
						<text class="font-md text-light-muted f12">
							<!-- 次数 -->
							{{i18n.lottery_info.t5}}
							<text class="text-warning">{{item.goods_buy_num}}</text>
							<!-- 次 -->
							{{i18n.common.ci}}
						</text>
					</view>
					<view>
						<van-button @click="showNumber(item)" type="warning" size="mini">
							<!-- 查看号码 -->
							{{i18n.lottery_info.t6}}
						</van-button>
					</view>
				</view>
			</view>
		</view>
			
<!-- 			<view class="mt-1">
				<scroll-view style="height: 860rpx;width: 750rpx;" scroll-y="true" >
					<view v-for="item in 1000" style="width: 20%;display: inline-block;float: left;" class="text-md text-warning ">100001</view>
				</scroll-view>
			</view> -->
		</view>
		
		<!--显示中奖号码的抽屉-->
		<uni-drawer :width="dwidth" ref="showRight" mode="right" :mask-click="true"
			@change="change($event,'showRight')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<van-sticky>
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<!-- <view class="cu-avatar round lg"
									:style="'background-image:url('+selectedUser.user_header+');'">
								</view> -->
								<view class="content">
									<!-- <view class="text-grey" style="font-size: 11px;">{{selectedUser.nick_name}}（{{selectedUser.user_ip_address}}）</view> -->
									<!-- <view class="text-gray text-sm flex">
										<view class="text-cut"  style="font-size: 11px;">
											<text class="cuIcon-infofill text-red  margin-right-xs"></text> 
											{{selectedUser.fight_time}}
										</view>
									</view> -->
									<view class="d-flex" style="font-size: 11px;">
										<text>
											<!-- 本期共购买 -->
											{{i18n.lottery_info.t7}}
										</text>
										<view class="text-warning font-md px-1" style="font-size: 11px;">
											{{fightRecordList.length}} {{i18n.common.ci}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</van-sticky>
					<view>
						<!--抽奖号码面板-->
						<text
							style="display: inline-block;float: left; margin: 10px 5px;font-size: 12px;width: 98rpx;"
							v-for="(item,index) in fightRecordList" :key="index">
							{{item.fight_num}}
						</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		
		<view class=" bg-white">
			<van-goods-action>
				<!-- 抽奖记录 -->
			  <van-goods-action-button @click="navToRecord" type="warning" :text="i18n.lottery_info.t8" />
			  <!-- 继续抽奖 -->
			  <van-goods-action-button @click="switchTabToLottery" type="danger" :text="i18n.lottery_info.t9" />
			</van-goods-action>
		</view>
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import {
		paymentResult,
		getAllUserParticipation
	} from '@/api/lottery.js';
	
	
	export default{
		data(){
			return {
				param:{},
				itemListInfo:{},
				//抽屉宽度
				dwidth: 300,
				goodItem:{},
				fightRecordList:[]
			}
		},
		onLoad(options){
			console.log(options)
			this.param=options;
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.home_page.title
			});
		},
		onShow() {
			 Promise.all([this.getPaymentResult()]);
		},
		methods:{
			getPaymentResult(){
				let that=this;
				paymentResult(this.param).then(res=>{
					that.itemListInfo=res;
				})
			},
			showNumber(item){
				this.showDrawer(item)
				//console.log(item)
			},
			navToRecord(){
				uni.navigateTo({
					url:"/pages/lottery/lottery_order/lottery_order?status=进行中"
				})
			},
			switchTabToLottery(){
				uni.switchTab({
					url:"/pages/lottery/index/index"
				})
			}, // 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}, // 打开窗口
			showDrawer(data) {
				//console.log(data)
				let that=this;
				this.$refs['showRight'].open();
				this.goodItem=data;
				getAllUserParticipation({user_id:Cache.get("UID"),goods_fight_id:that.goodItem.id}).then(res=>{
					that.fightRecordList=res.fightRecordList;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "@/common/font.css";
.l-info-box{
	// border-radius: 6px;
    // width: 96%;
    // margin: 0 auto;
}
</style>
